<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4 px-6">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 左边栏，占用 3 列 -->
            <div class="col-span-4 md:col-span-3 mb-3">
                <!-- 分类列表 -->
                <div class="w-full p-5 pb-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <!-- 分类标题 -->
                    <h2 class="flex items-center mb-5 font-bold text-gray-900 uppercase dark:text-white">
                        <!-- 文件夹图标 -->
                        <svg t="1698998570037" class="inline icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="21572" width="200" height="200">
                            <path
                                d="M938.666667 464.592593h-853.333334v-265.481482c0-62.577778 51.2-113.777778 113.777778-113.777778h128.948148c15.17037 0 28.444444 3.792593 41.718519 11.377778l98.607407 64.474074h356.503704c62.577778 0 113.777778 51.2 113.777778 113.777778v189.62963z"
                                fill="#3A69DD" p-id="21573"></path>
                            <path
                                d="M805.925926 398.222222h-587.851852v-125.155555c0-24.651852 20.859259-45.511111 45.511111-45.511111h496.82963c24.651852 0 45.511111 20.859259 45.511111 45.511111V398.222222z"
                                fill="#D9E3FF" p-id="21574"></path>
                            <path
                                d="M843.851852 417.185185h-663.703704v-98.607407c0-28.444444 22.755556-53.096296 53.096296-53.096297h559.407408c28.444444 0 53.096296 22.755556 53.096296 53.096297V417.185185z"
                                fill="#FFFFFF" p-id="21575"></path>
                            <path
                                d="M786.962963 938.666667h-549.925926c-83.437037 0-151.703704-68.266667-151.703704-151.703704V341.333333s316.681481 37.925926 430.45926 37.925926c189.62963 0 422.874074-37.925926 422.874074-37.925926v445.62963c0 83.437037-68.266667 151.703704-151.703704 151.703704z"
                                fill="#5F7CF9" p-id="21576"></path>
                            <path
                                d="M559.407407 512h-75.851851c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h75.851851c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-37.925926 37.925926z"
                                fill="#F9D523" p-id="21577"></path>
                        </svg>
                        分类
                        <span v-if="categories && categories.length > 0"
                            class="ml-2 text-gray-600 font-normal dark:text-gray-300">
                            ( {{ categories.length }} )
                        </span>
                    </h2>
                    <!-- 分类列表 -->
                    <div class="text-sm flex flex-wrap gap-3 font-medium text-gray-600 rounded-lg dark:border-gray-600 dark:text-white">
                        <a @click="goCategoryArticleListPage(category.id, category.name)"
                            v-for="(category, index) in categories" :key="index"
                            :class="[route.query.name == category.name ? 'bg-sky-100 hover:bg-sky-200' : 'hover:bg-gray-100']"
                            class="inline-flex cursor-pointer items-center px-4 py-2 text-sm font-medium text-center border rounded-lg 
                            focus:ring-4 focus:outline-none focus:ring-gray-300 
                            dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700 dark:hover:text-white">
                            {{ category.name }}
                            <span
                                class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                                {{ category.articlesTotal }}
                            </span>
                        </a>
                    </div>
                </div>


                <!-- 分类文章列表 -->
                <div class="p-5 mb-4 border border-gray-200 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700">
                    <h1 class="flex items-center text-lg font-semibold text-gray-900 dark:text-white">
                        <!-- 文件夹图标 -->
                        <svg class="inline w-4 h-4 mr-2 dark:text-white" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                        </svg>
                        {{ categoryName }}
                    </h1>
                    <ol v-if="articles && articles.length > 0" class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
                        <li v-for="(article, index) in articles" :key="index">
                            <a @click="goArticleDetailPage(article.id)" class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                                <img class="w-24 h-12 mb-3 mr-3 rounded-lg sm:mb-0"
                                    :src="article.cover" />
                                <div class="text-gray-600 dark:text-gray-400">
                                    <h2 class="text-base font-normal text-gray-900">
                                        {{ article.title }}
                                    </h2>
                                    <span
                                        class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
                                        <svg class="inline w-2.5 h-2.5 mr-2 text-gray-400 dark:text-white"
                                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 20 20">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                        </svg>
                                        {{ article.createDate }}
                                    </span>
                                </div>
                            </a>
                        </li>
                    </ol>
                    <!-- 该分类下没有文章提示，指定为 flex 布局，内容垂直水平居中，并纵向排列 -->
                    <div v-else class="flex items-center justify-center flex-col">
                        <svg height="300" node-id="1" sillyvg="true" template-height="600" template-width="600" version="1.1" viewBox="0 0 600 600" width="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="58"><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-1" node-id="5" spreadMethod="pad" x1="1.4458808" x2="0.29515958" y1="0.66910326" y2="0.67326146"><stop offset="0" stop-color="#e0e5ef" stop-opacity="0"/><stop offset="1" stop-color="#e0e5ef"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-2" node-id="8" spreadMethod="pad" x1="1.4458808" x2="0.29515958" y1="0.670017" y2="0.6741977"><stop offset="0" stop-color="#e0e5ef" stop-opacity="0"/><stop offset="1" stop-color="#e0e5ef"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient1" node-id="72" spreadMethod="pad" x1="0.9340618" x2="0.40599933" y1="0.98800004" y2="1"><stop offset="0" stop-color="#e0e5ef" stop-opacity="0"/><stop offset="1" stop-color="#e0e5ef"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-3" node-id="11" spreadMethod="pad" x1="0.9340618" x2="0.40599933" y1="0.98800004" y2="1"><stop offset="0" stop-color="#e0e5ef" stop-opacity="0"/><stop offset="1" stop-color="#e0e5ef"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-4" node-id="14" spreadMethod="pad" x1="0.92518216" x2="0.40792233" y1="0.98800004" y2="1"><stop offset="0" stop-color="#e0e5ef" stop-opacity="0"/><stop offset="1" stop-color="#e0e5ef"/></linearGradient><linearGradient gradientUnits="objectBoundingBox" id="linearGradient-5" node-id="17" spreadMethod="pad" x1="0.5" x2="0.5" y1="1" y2="-0.268682"><stop offset="0" stop-color="#a2abb9"/><stop offset="1" stop-color="#e7eaf0"/></linearGradient></defs><g node-id="96"><path d="M 297.40 77.00 L 307.60 77.20 L 317.70 77.90 L 327.60 79.00 L 337.30 80.50 L 346.90 82.40 L 356.40 84.70 L 365.70 87.40 L 374.90 90.50 L 383.80 94.00 L 392.50 97.80 L 403.30 103.10 L 413.60 108.90 L 423.60 115.20 L 433.20 122.00 L 415.60 122.20 L 413.50 122.80 L 411.40 123.80 L 408.10 126.60 L 405.80 130.50 L 405.20 132.60 L 405.00 136.00 L 405.20 138.40 L 405.80 140.50 L 406.80 142.60 L 409.60 145.90 L 413.50 148.20 L 415.60 148.80 L 418.00 149.00 L 463.20 149.00 L 469.50 156.10 L 475.40 163.40 L 481.10 170.90 L 486.40 178.80 L 507.90 178.80 L 510.40 179.00 L 512.80 179.60 L 514.90 180.70 L 516.90 182.10 L 518.60 183.70 L 520.00 185.70 L 521.00 187.90 L 521.60 190.20 L 521.90 192.80 L 521.30 197.60 L 520.60 199.50 L 519.00 202.00 L 517.00 204.20 L 514.50 205.90 L 511.80 207.00 L 492.00 207.00 L 489.10 207.30 L 486.40 208.00 L 483.90 209.20 L 481.70 210.80 L 479.80 212.70 L 478.20 214.90 L 477.00 217.40 L 476.30 220.10 L 476.00 228.00 L 476.30 230.90 L 477.00 233.60 L 478.20 236.10 L 479.80 238.30 L 481.70 240.20 L 483.90 241.80 L 486.40 243.00 L 489.10 243.70 L 492.00 244.00 L 559.90 244.00 L 564.20 245.80 L 566.10 247.10 L 569.20 250.50 L 571.30 254.70 L 572.00 259.50 L 571.70 263.30 L 571.00 266.00 L 569.80 268.50 L 568.20 270.70 L 566.30 272.60 L 564.10 274.20 L 561.60 275.40 L 558.90 276.10 L 556.00 276.40 L 520.80 276.40 L 521.60 287.10 L 521.90 298.00 L 521.60 308.50 L 520.90 318.80 L 519.70 328.90 L 518.10 338.90 L 515.90 348.70 L 513.40 358.40 L 510.40 367.90 L 507.00 377.20 L 503.20 386.30 L 499.10 395.20 L 494.50 403.90 L 489.50 412.40 L 484.20 420.60 L 478.60 428.50 L 472.60 436.20 L 466.20 443.70 L 459.60 450.80 L 452.60 457.60 L 445.40 464.20 L 437.80 470.40 L 430.00 476.40 L 421.90 481.90 L 413.60 487.10 L 405.00 492.00 L 396.10 496.50 L 387.10 500.70 L 377.80 504.40 L 368.40 507.70 L 358.70 510.60 L 348.80 513.20 L 338.90 515.20 L 328.80 516.90 L 318.50 518.00 L 308.00 518.70 L 297.40 519.00 L 287.40 518.80 L 277.60 518.20 L 268.00 517.10 L 258.50 515.70 L 249.20 513.90 L 237.60 511.10 L 226.30 507.70 L 215.40 503.80 L 204.70 499.30 L 194.20 494.30 L 184.00 488.80 L 174.30 482.80 L 164.80 476.40 L 155.70 469.40 L 147.00 462.10 L 138.60 454.30 L 130.70 446.10 L 123.20 437.50 L 116.20 428.60 L 109.60 419.30 L 103.50 409.60 L 97.90 399.60 L 92.90 389.30 L 88.30 378.80 L 84.30 367.90 L 74.20 367.70 L 72.80 367.10 L 71.50 366.10 L 70.60 364.80 L 70.00 363.40 L 69.70 361.70 L 70.00 359.90 L 70.80 358.20 L 72.00 356.90 L 73.60 356.00 L 86.40 355.80 L 88.50 355.20 L 90.60 354.20 L 93.90 351.40 L 96.20 347.50 L 96.80 345.40 L 97.00 343.00 L 96.80 339.60 L 96.20 337.50 L 95.20 335.40 L 92.40 332.10 L 90.60 330.80 L 88.50 329.80 L 86.40 329.20 L 75.00 328.80 L 52.90 328.80 L 49.30 328.20 L 47.70 327.40 L 45.00 325.20 L 43.20 322.20 L 42.70 320.40 L 42.70 316.70 L 44.00 313.40 L 46.20 310.70 L 49.30 308.90 L 52.90 308.30 L 73.10 308.30 L 72.90 298.00 L 73.10 288.20 L 73.70 278.50 L 74.80 269.00 L 76.20 259.70 L 78.10 250.50 L 80.90 239.00 L 84.40 227.90 L 88.40 217.10 L 92.90 206.50 L 57.00 206.50 L 53.20 206.20 L 49.50 205.50 L 46.10 204.30 L 42.90 202.70 L 39.90 200.70 L 37.20 198.30 L 34.80 195.60 L 32.80 192.70 L 31.20 189.40 L 30.00 186.00 L 29.30 182.40 L 29.00 178.50 L 29.20 173.20 L 29.90 169.70 L 31.10 166.40 L 32.60 163.20 L 34.50 160.30 L 36.70 157.70 L 39.20 155.30 L 42.00 153.30 L 45.10 151.60 L 48.30 150.30 L 51.70 149.50 L 55.40 149.00 L 182.00 149.00 L 185.50 148.40 L 188.50 146.60 L 190.60 144.00 L 191.40 142.50 L 192.00 139.00 L 191.80 137.20 L 191.40 135.50 L 189.60 132.50 L 187.00 130.40 L 185.50 129.60 L 182.00 129.00 L 152.70 129.00 L 153.40 128.40 L 138.80 128.40 L 135.40 128.10 L 132.20 127.20 L 129.30 125.80 L 126.60 123.90 L 124.30 121.70 L 122.40 119.00 L 121.00 116.00 L 120.20 112.90 L 119.80 109.40 L 120.20 104.90 L 121.00 101.70 L 122.40 98.70 L 124.30 96.10 L 126.60 93.80 L 129.30 91.90 L 132.20 90.50 L 135.40 89.70 L 138.80 89.30 L 223.20 89.30 L 240.90 84.00 L 259.30 80.20 L 278.00 77.80 L 297.40 77.00 Z" fill="#f3f3fa" fill-opacity="0.6015942" fill-rule="evenodd" group-id="1" id="背景" node-id="21" stroke="none" target-height="442" target-width="543" target-x="29" target-y="77"/></g><path d="M 199.80 181.00 L 192.50 181.00 L 192.20 177.30 L 191.50 173.90 L 190.40 170.70 L 188.80 167.60 L 187.00 164.80 L 184.70 162.20 L 182.20 160.00 L 179.40 158.10 L 176.30 156.60 L 173.00 155.40 L 169.60 154.70 L 166.00 154.50 L 162.30 154.70 L 158.90 155.40 L 155.70 156.60 L 152.60 158.10 L 149.80 160.00 L 147.20 162.20 L 145.00 164.80 L 143.10 167.60 L 141.60 170.70 L 140.40 173.90 L 139.70 177.30 L 139.50 181.00 L 134.10 181.00 L 131.90 181.20 L 129.90 181.80 L 128.00 182.80 L 124.80 185.70 L 122.70 189.60 L 121.90 194.20 L 122.10 196.60 L 123.60 200.90 L 124.80 202.80 L 128.00 205.70 L 129.90 206.60 L 131.90 207.20 L 134.10 207.50 L 199.80 207.50 L 202.00 207.20 L 204.00 206.60 L 207.60 204.40 L 210.30 200.90 L 211.80 196.60 L 212.00 194.20 L 211.80 191.80 L 210.30 187.50 L 207.60 184.10 L 204.00 181.80 L 202.00 181.20 L 199.80 181.00 Z" fill="url(#linearGradient-1)" fill-rule="nonzero" id="路径" node-id="22" stroke="none" target-height="53" target-width="90.1" target-x="121.9" target-y="154.5"/><path d="M 445.40 162.30 L 444.60 166.10 L 443.70 167.70 L 441.00 170.50 L 437.20 172.30 L 432.80 173.00 L 393.90 173.00 L 391.50 172.70 L 387.40 171.30 L 384.00 168.90 L 381.80 165.70 L 381.20 163.90 L 381.00 161.80 L 381.80 158.00 L 384.10 154.80 L 387.40 152.30 L 386.90 150.20 L 387.20 148.20 L 388.00 146.40 L 389.40 144.90 L 391.10 143.70 L 393.20 142.90 L 395.60 142.60 L 398.50 143.10 L 400.90 144.30 L 402.90 141.70 L 405.30 139.50 L 408.10 137.60 L 411.30 136.20 L 414.70 135.30 L 418.50 135.00 L 422.00 135.30 L 425.10 136.00 L 428.10 137.20 L 430.80 138.90 L 433.00 140.90 L 434.90 143.10 L 436.30 145.70 L 437.20 148.40 L 437.50 152.30 L 439.70 153.40 L 441.60 154.70 L 443.20 156.30 L 444.40 158.10 L 445.10 160.10 L 445.40 162.30 Z" fill="url(#linearGradient-2)" fill-rule="nonzero" id="路径" node-id="23" stroke="none" target-height="38" target-width="64.399994" target-x="381" target-y="135"/><path d="M 284.50 415.00 L 324.70 415.70 L 362.20 417.80 L 396.00 421.10 L 412.30 423.20 L 426.80 425.50 L 439.80 428.00 L 449.30 428.30 L 458.10 429.00 L 466.40 430.10 L 474.60 431.70 L 481.80 433.50 L 488.10 435.60 L 492.80 437.60 L 496.70 439.60 L 502.70 443.70 L 505.10 446.20 L 506.70 448.60 L 507.70 451.00 L 508.00 453.50 L 507.80 455.50 L 506.10 459.40 L 504.60 461.40 L 502.20 463.70 L 499.10 466.00 L 495.10 468.30 L 486.10 472.10 L 480.60 473.80 L 468.90 476.40 L 462.10 477.50 L 452.30 480.20 L 440.70 482.80 L 441.00 486.00 L 440.70 488.80 L 440.10 491.60 L 438.90 494.30 L 437.20 497.10 L 435.00 499.90 L 431.90 502.90 L 428.20 506.00 L 423.60 509.00 L 412.80 514.50 L 400.10 519.30 L 392.70 521.50 L 382.80 523.90 L 372.00 526.00 L 360.30 527.80 L 348.50 529.00 L 336.10 529.70 L 323.00 530.00 L 311.20 529.80 L 300.00 529.20 L 289.30 528.20 L 278.50 526.80 L 268.60 525.10 L 259.30 523.00 L 250.10 520.60 L 241.90 518.00 L 234.60 515.20 L 229.20 512.70 L 220.20 507.60 L 213.10 502.00 L 210.30 499.10 L 208.10 496.10 L 206.60 493.20 L 190.90 491.80 L 162.60 488.60 L 136.80 484.50 L 114.80 479.70 L 105.40 477.10 L 97.50 474.40 L 86.50 469.80 L 82.50 467.60 L 76.90 463.30 L 75.10 461.20 L 73.90 459.30 L 73.20 457.40 L 73.00 455.50 L 73.30 453.50 L 74.10 451.40 L 75.50 449.30 L 77.60 447.10 L 80.60 444.70 L 84.30 442.40 L 89.00 440.00 L 94.80 437.60 L 101.90 435.10 L 111.20 432.30 L 122.10 429.50 L 134.90 426.90 L 162.00 422.50 L 177.80 420.50 L 210.30 417.60 L 246.20 415.70 L 284.50 415.00 Z" fill="#e7eaf0" fill-rule="evenodd" id="形状结合" node-id="24" stroke="none" target-height="115" target-width="435" target-x="73" target-y="415"/><path d="M 284.00 466.10 L 283.70 467.20 L 282.90 468.40 L 281.30 469.60 L 278.30 471.00 L 273.90 472.50 L 262.90 474.40 L 249.50 475.10 L 236.10 474.40 L 225.10 472.50 L 220.70 471.00 L 217.70 469.60 L 216.10 468.40 L 215.30 467.20 L 215.00 466.10 L 215.30 465.00 L 216.10 463.80 L 217.70 462.60 L 220.70 461.20 L 225.10 459.70 L 236.10 457.80 L 249.50 457.10 L 262.90 457.80 L 273.90 459.70 L 278.30 461.20 L 281.30 462.60 L 282.90 463.80 L 283.70 465.00 L 284.00 466.10 Z" fill="#d1d6e2" fill-rule="nonzero" id="椭圆形" node-id="25" stroke="none" target-height="18" target-width="69" target-x="215" target-y="457.1"/><g node-id="97"><path d="M 463.30 400.60 L 464.00 403.40 L 463.80 405.00 L 463.10 406.50 L 462.00 407.60 L 460.60 408.40 L 447.40 408.70 L 447.50 423.60 L 448.00 432.00 L 439.00 432.00 L 439.30 425.70 L 439.40 409.80 L 438.20 410.50 L 437.00 410.70 L 435.20 410.20 L 433.90 408.80 L 426.80 408.50 L 424.90 407.70 L 423.40 406.40 L 422.60 405.30 L 422.20 404.10 L 422.10 402.00 L 424.60 395.30 L 426.30 393.20 L 436.10 375.20 L 438.90 371.50 L 441.50 370.20 L 443.10 370.00 L 445.30 370.30 L 447.20 371.20 L 448.70 372.50 L 457.70 389.50 L 460.20 391.00 L 461.90 393.40 L 462.60 396.40 L 462.30 398.50 L 463.30 400.60 Z" fill="url(#linearGradient1)" fill-rule="nonzero" group-id="2" id="路径" node-id="27" stroke="none" target-height="62" target-width="41.899994" target-x="422.1" target-y="370"/><path d="M 503.30 420.60 L 504.00 423.40 L 503.80 425.00 L 503.10 426.50 L 502.00 427.60 L 500.60 428.40 L 487.40 428.70 L 487.50 443.60 L 488.00 452.00 L 479.00 452.00 L 479.30 445.70 L 479.40 429.80 L 478.20 430.50 L 477.00 430.70 L 475.20 430.20 L 473.90 428.80 L 466.80 428.50 L 464.90 427.70 L 463.40 426.40 L 462.60 425.30 L 462.20 424.10 L 462.10 422.00 L 464.60 415.30 L 466.30 413.20 L 476.10 395.20 L 478.90 391.50 L 481.50 390.20 L 483.10 390.00 L 485.30 390.30 L 487.20 391.20 L 488.70 392.50 L 497.70 409.50 L 500.20 411.00 L 501.90 413.40 L 502.60 416.40 L 502.30 418.50 L 503.30 420.60 Z" fill="url(#linearGradient-3)" fill-rule="nonzero" group-id="2" id="路径" node-id="28" stroke="none" target-height="62" target-width="41.899994" target-x="462.1" target-y="390"/><path d="M 150.00 413.40 L 151.00 417.40 L 150.40 420.40 L 149.70 421.80 L 148.20 423.40 L 146.30 424.50 L 127.60 424.90 L 127.80 446.00 L 128.50 458.00 L 115.90 458.00 L 116.30 449.10 L 116.40 426.40 L 115.40 427.20 L 113.10 427.80 L 110.50 427.10 L 108.70 425.10 L 98.80 424.60 L 96.90 424.00 L 95.30 423.00 L 93.90 421.70 L 92.90 420.10 L 92.20 418.30 L 92.10 415.40 L 94.50 409.40 L 95.60 405.80 L 98.00 403.00 L 111.80 377.50 L 113.70 374.60 L 115.80 372.20 L 117.40 371.00 L 119.40 370.30 L 121.70 370.00 L 125.60 370.70 L 127.30 371.70 L 130.10 374.40 L 142.10 397.70 L 144.00 398.60 L 145.60 399.80 L 147.00 401.40 L 148.10 403.20 L 148.80 405.20 L 149.00 407.40 L 148.50 410.40 L 150.00 413.40 Z" fill="url(#linearGradient-4)" fill-rule="nonzero" group-id="2" id="路径" node-id="29" stroke="none" target-height="88" target-width="58.9" target-x="92.1" target-y="370"/></g><g node-id="98"><path d="M 164.00 263.00 L 214.00 263.00 L 222.30 276.20 L 291.90 276.00 L 296.30 276.30 L 300.50 277.20 L 304.40 278.50 L 308.10 280.40 L 311.50 282.70 L 314.60 285.40 L 317.30 288.40 L 319.60 291.80 L 321.50 295.50 L 322.80 299.40 L 323.70 303.60 L 324.00 308.00 L 324.00 409.00 L 164.00 409.00 L 164.00 263.00 Z" fill="#d9dfe8" fill-rule="evenodd" group-id="3" id="矩形" node-id="31" stroke="none" target-height="146" target-width="160" target-x="164" target-y="263"/><path d="M 181.00 295.00 L 311.00 295.00 L 311.00 439.00 L 181.00 439.00 Z" fill="#a2abb9" fill-rule="evenodd" group-id="3" id="矩形" node-id="32" stroke="none" target-height="144" target-width="130" target-x="181" target-y="295"/><path d="M 178.00 309.00 L 314.00 309.00 L 314.00 436.00 L 178.00 436.00 Z" fill="#ffffff" fill-rule="evenodd" group-id="3" id="矩形" node-id="33" stroke="none" target-height="127" target-width="136" target-x="178" target-y="309"/><path d="M 177.00 318.00 L 318.00 318.00 L 318.00 435.00 L 177.00 435.00 Z" fill="#c8cede" fill-rule="evenodd" group-id="3" id="矩形" node-id="34" stroke="none" target-height="117" target-width="141" target-x="177" target-y="318"/><path d="M 151.00 331.00 L 341.00 331.00 L 323.70 439.00 L 168.30 439.00 Z" fill="url(#linearGradient-5)" fill-rule="nonzero" group-id="3" id="矩形" node-id="35" stroke="none" target-height="108" target-width="190" target-x="151" target-y="331"/><path d="M 264.50 378.00 L 265.90 378.30 L 267.00 379.00 L 267.70 380.10 L 268.00 381.50 L 267.70 382.90 L 267.00 384.00 L 265.90 384.70 L 264.50 385.00 L 263.10 384.70 L 262.00 384.00 L 261.30 382.90 L 261.00 381.50 L 261.30 380.10 L 262.00 379.00 L 263.10 378.30 L 264.50 378.00 Z" fill="#d9dfe8" fill-rule="evenodd" group-id="3" id="矩形" node-id="36" stroke="none" target-height="7" target-width="7" target-x="261" target-y="378"/><path d="M 278.50 378.00 L 302.50 378.00 L 303.90 378.30 L 305.00 379.00 L 305.70 380.10 L 306.00 381.50 L 305.70 382.90 L 305.00 384.00 L 303.90 384.70 L 302.50 385.00 L 278.50 385.00 L 277.10 384.70 L 276.00 384.00 L 275.30 382.90 L 275.00 381.50 L 275.30 380.10 L 276.00 379.00 L 277.10 378.30 L 278.50 378.00 Z" fill="#d9dfe8" fill-rule="evenodd" group-id="3" id="矩形" node-id="37" stroke="none" target-height="7" target-width="31" target-x="275" target-y="378"/><path d="M 263.50 393.00 L 301.50 393.00 L 302.90 393.30 L 304.00 394.00 L 304.70 395.10 L 305.00 396.50 L 304.70 397.90 L 304.00 399.00 L 302.90 399.70 L 301.50 400.00 L 263.50 400.00 L 262.10 399.70 L 261.00 399.00 L 260.30 397.90 L 260.00 396.50 L 260.30 395.10 L 261.00 394.00 L 262.10 393.30 L 263.50 393.00 Z" fill="#d9dfe8" fill-rule="evenodd" group-id="3" id="矩形备份-2" node-id="38" stroke="none" target-height="7" target-width="45" target-x="260" target-y="393"/><path d="M 251.00 256.00 L 250.70 258.70 L 250.10 261.20 L 249.00 263.60 L 247.50 265.70 L 245.70 267.50 L 243.60 269.00 L 241.20 270.10 L 238.70 270.70 L 236.00 271.00 L 233.30 270.70 L 230.80 270.10 L 228.40 269.00 L 226.30 267.50 L 224.50 265.70 L 223.00 263.60 L 221.90 261.20 L 221.30 258.70 L 221.00 256.00 L 221.30 253.30 L 221.90 250.80 L 223.00 248.40 L 224.50 246.30 L 226.30 244.50 L 228.40 243.00 L 230.80 241.90 L 233.30 241.30 L 236.00 241.00 L 238.70 241.30 L 241.20 241.90 L 243.60 243.00 L 245.70 244.50 L 247.50 246.30 L 249.00 248.40 L 250.10 250.80 L 250.70 253.30 L 251.00 256.00 Z" fill="#d9dfe8" fill-rule="evenodd" group-id="3" id="椭圆形" node-id="39" stroke="none" target-height="30" target-width="30" target-x="221" target-y="241"/><path d="M 236.00 261.00 L 230.10 264.10 L 231.20 257.50 L 226.50 252.90 L 233.10 252.00 L 236.00 246.00 L 238.90 252.00 L 245.50 252.90 L 240.80 257.50 L 241.90 264.10 Z" fill="#ffffff" fill-rule="evenodd" group-id="3" id="星形" node-id="40" stroke="none" target-height="18.100006" target-width="19" target-x="226.5" target-y="246"/><path d="M 376.00 255.00 L 375.70 259.40 L 374.90 263.50 L 373.50 267.50 L 371.60 271.20 L 369.30 274.60 L 366.60 277.60 L 363.60 280.30 L 360.20 282.60 L 356.50 284.50 L 352.50 285.90 L 348.40 286.70 L 344.00 287.00 L 339.60 286.70 L 335.50 285.90 L 331.50 284.50 L 327.80 282.60 L 324.40 280.30 L 321.40 277.60 L 318.70 274.60 L 316.40 271.20 L 314.50 267.50 L 313.10 263.50 L 312.30 259.40 L 312.00 255.00 L 312.30 250.60 L 313.10 246.50 L 314.50 242.50 L 316.40 238.80 L 318.70 235.40 L 321.40 232.40 L 324.40 229.70 L 327.80 227.40 L 331.50 225.50 L 335.50 224.10 L 339.60 223.30 L 344.00 223.00 L 348.40 223.30 L 352.50 224.10 L 356.50 225.50 L 360.20 227.40 L 363.60 229.70 L 366.60 232.40 L 369.30 235.40 L 371.60 238.80 L 373.50 242.50 L 374.90 246.50 L 375.70 250.60 L 376.00 255.00 Z" fill="#c0c9db" fill-rule="evenodd" group-id="3" id="椭圆形" node-id="41" stroke="none" target-height="64" target-width="64" target-x="312" target-y="223"/><path d="M 342.00 261.40 L 342.00 257.10 L 345.70 256.90 L 347.10 256.30 L 349.20 254.00 L 349.80 252.50 L 350.00 250.80 L 349.80 246.80 L 349.20 245.40 L 347.10 243.10 L 345.70 242.50 L 344.00 242.30 L 342.30 242.50 L 340.90 243.10 L 339.70 244.10 L 338.80 245.40 L 338.20 246.80 L 338.00 250.80 L 334.00 250.80 L 334.20 246.70 L 334.60 244.90 L 336.30 241.70 L 338.90 239.40 L 342.20 238.20 L 344.00 238.00 L 347.50 238.70 L 350.50 240.50 L 352.70 243.20 L 353.80 246.70 L 354.00 248.60 L 353.70 253.30 L 352.90 255.50 L 351.70 257.50 L 350.10 259.10 L 348.20 260.40 L 346.00 261.20 L 346.00 265.60 L 342.00 265.60 L 342.00 261.40 Z M 342.00 267.80 L 346.00 267.80 L 346.00 272.00 L 342.00 272.00 L 342.00 267.80 Z" fill="#ffffff" fill-rule="nonzero" group-id="3" id="形状" node-id="42" stroke="none" target-height="34" target-width="20" target-x="334" target-y="238"/></g><g node-id="99"><path d="M 373.90 331.60 L 371.90 327.00 L 368.60 316.70 L 368.00 311.00 L 368.20 310.50 L 369.00 310.10 L 370.80 310.00 L 374.30 311.30 L 379.00 315.30 L 381.40 318.10 L 383.70 321.50 L 387.60 329.10 L 390.60 337.20 L 390.90 340.10 L 390.80 343.60 L 390.40 345.20 L 389.60 346.30 L 388.50 346.90 L 387.40 347.00 L 385.00 346.00 L 380.80 342.70 L 377.50 338.50 L 373.90 331.60 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4" id="路径" node-id="44" stroke="none" target-height="37" target-width="22.899994" target-x="368" target-y="310"/><path d="M 398.30 359.70 L 400.00 358.20 L 402.30 353.00 L 405.10 348.20 L 407.60 345.00 L 415.60 336.30 L 418.50 332.50 L 421.10 328.40 L 423.50 323.60 L 424.00 320.60 L 423.50 319.60 L 422.90 319.20 L 420.30 319.10 L 416.60 320.50 L 414.60 321.70 L 408.90 326.30 L 401.10 334.70 L 397.90 340.00 L 395.30 345.90 L 394.00 350.50 L 394.20 354.80 L 394.80 357.50 L 395.50 359.00 L 396.30 359.80 L 397.20 360.00 L 398.30 359.70 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4" id="路径" node-id="45" stroke="none" target-height="40.899994" target-width="30" target-x="394" target-y="319.1"/><path d="M 379.50 380.70 L 380.80 381.90 L 382.40 381.80 L 383.60 380.70 L 384.80 377.60 L 385.00 374.60 L 384.50 370.30 L 382.60 364.30 L 380.50 360.90 L 377.30 357.60 L 375.00 355.90 L 369.30 352.90 L 366.40 352.20 L 361.10 352.20 L 359.10 352.80 L 358.30 353.40 L 358.00 354.40 L 358.40 356.30 L 360.00 358.60 L 369.70 366.60 L 372.20 369.20 L 374.70 372.40 L 377.20 376.20 L 379.50 380.70 Z" fill="#acb4c2" fill-rule="nonzero" group-id="4" id="路径" node-id="46" stroke="none" target-height="29.699982" target-width="27" target-x="358" target-y="352.2"/><path d="M 420.60 343.30 L 425.70 340.90 L 430.90 339.40 L 434.60 339.00 L 438.10 339.10 L 439.40 339.40 L 439.90 339.90 L 439.60 341.40 L 436.90 343.90 L 424.90 351.70 L 422.60 353.50 L 414.80 361.30 L 409.30 370.00 L 407.10 371.70 L 405.30 371.90 L 404.30 371.50 L 402.90 369.90 L 402.20 368.10 L 402.00 366.70 L 402.20 363.30 L 403.10 359.50 L 403.50 358.60 L 406.80 354.90 L 408.00 351.70 L 410.90 348.70 L 412.20 347.70 L 420.60 343.30 Z" fill="#909aa9" fill-rule="nonzero" group-id="4" id="路径" node-id="47" stroke="none" target-height="32.899994" target-width="37.899994" target-x="402" target-y="339"/><g node-id="100"><path d="M 413.90 374.60 L 417.30 372.00 L 423.30 369.00 L 425.60 368.60 L 432.00 369.20 L 433.80 368.40 L 432.20 364.50 L 430.10 362.30 L 427.30 361.00 L 425.70 360.70 L 421.90 361.20 L 420.00 361.90 L 417.30 363.40 L 414.80 365.50 L 412.80 368.00 L 411.10 370.80 L 409.90 373.70 L 408.90 378.50 L 409.40 380.30 L 409.80 380.40 L 410.50 380.00 L 413.90 374.60 Z" fill="#9da5b5" fill-rule="nonzero" group-id="4,5" id="路径" node-id="48" stroke="none" target-height="19.699982" target-width="24.899994" target-x="408.9" target-y="360.7"/></g><g node-id="101"><path d="M 390.10 354.00 L 392.30 370.20 L 393.80 387.00 L 396.20 423.60 L 396.40 424.30 L 396.90 424.60 L 397.50 424.30 L 397.70 423.60 L 395.50 388.70 L 393.10 363.50 L 392.00 355.40 L 390.40 347.30 L 388.30 339.50 L 387.70 337.60 L 387.20 337.10 L 386.60 337.20 L 386.30 337.80 L 386.30 338.60 L 388.50 346.10 L 390.10 354.00 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4,6" id="路径" node-id="49" stroke="none" target-height="87.5" target-width="11.400024" target-x="386.3" target-y="337.1"/></g><g node-id="102"><path d="M 399.80 348.60 L 396.70 356.30 L 394.10 364.40 L 392.00 373.00 L 390.50 381.70 L 389.40 391.40 L 388.90 401.30 L 388.90 411.10 L 389.60 423.30 L 390.00 424.00 L 390.60 424.10 L 391.00 423.60 L 390.40 403.60 L 390.80 394.00 L 391.70 384.50 L 393.10 375.70 L 395.10 367.10 L 397.40 359.20 L 400.30 351.60 L 404.90 342.00 L 408.90 335.20 L 408.70 334.50 L 408.20 334.10 L 407.60 334.40 L 402.20 343.60 L 399.80 348.60 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4,7" id="路径" node-id="50" stroke="none" target-height="90" target-width="20" target-x="388.9" target-y="334.1"/></g><path d="M 407.60 362.30 L 403.50 369.90 L 400.30 378.60 L 398.20 388.00 L 397.50 393.70 L 397.00 405.00 L 397.30 413.60 L 398.40 424.30 L 398.80 424.90 L 399.40 425.00 L 399.90 424.50 L 399.10 415.40 L 398.60 401.60 L 399.50 390.60 L 400.80 383.00 L 403.80 373.60 L 407.20 366.30 L 410.30 361.60 L 412.80 358.50 L 417.00 354.30 L 416.90 353.50 L 416.40 353.00 L 415.80 353.10 L 412.90 355.80 L 410.20 358.80 L 407.60 362.30 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4" id="路径" node-id="51" stroke="none" target-height="72" target-width="20" target-x="397" target-y="353"/><path d="M 409.00 378.10 L 404.90 387.80 L 401.90 398.50 L 400.90 404.10 L 400.00 415.10 L 400.10 420.60 L 400.40 422.70 L 401.00 423.00 L 401.50 422.70 L 401.80 422.00 L 401.60 416.50 L 402.10 407.70 L 403.20 400.40 L 404.40 395.10 L 406.30 388.80 L 409.90 380.30 L 416.00 370.00 L 415.80 369.30 L 415.20 369.00 L 414.60 369.30 L 411.70 373.50 L 409.00 378.10 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4" id="路径" node-id="52" stroke="none" target-height="54" target-width="16" target-x="400" target-y="369"/><g node-id="103"><path d="M 376.20 368.90 L 380.90 377.60 L 384.70 387.70 L 386.20 393.10 L 388.50 404.20 L 391.30 423.20 L 391.80 423.50 L 392.40 423.20 L 392.60 422.50 L 391.10 410.70 L 389.20 399.30 L 386.60 388.30 L 382.80 377.70 L 380.40 372.70 L 376.90 366.90 L 376.30 366.60 L 375.80 366.90 L 375.60 367.60 L 376.20 368.90 Z" fill="#a2abb9" fill-rule="nonzero" group-id="4,8" id="路径" node-id="53" stroke="none" target-height="56.899994" target-width="17" target-x="375.6" target-y="366.6"/></g><path d="M 400.40 411.70 L 403.30 417.30 L 404.90 419.40 L 406.10 420.00 L 406.80 419.80 L 407.80 418.50 L 408.00 416.40 L 407.60 406.10 L 406.10 396.30 L 404.80 391.70 L 403.00 387.60 L 401.70 385.60 L 400.20 383.90 L 398.60 382.60 L 397.10 382.00 L 396.10 382.00 L 395.40 382.50 L 394.70 383.40 L 394.20 384.60 L 394.10 389.40 L 394.90 395.20 L 396.40 401.00 L 398.30 406.60 L 400.40 411.70 Z" fill="#acb4c2" fill-rule="nonzero" group-id="4" id="路径" node-id="54" stroke="none" target-height="38" target-width="13.899994" target-x="394.1" target-y="382"/><path d="M 382.50 467.00 L 410.50 467.00 L 412.30 467.70 L 413.00 469.50 L 412.30 471.30 L 410.50 472.00 L 382.50 472.00 L 380.70 471.30 L 380.00 469.50 L 380.70 467.70 L 382.50 467.00 Z" fill="#d1d6e2" fill-rule="nonzero" group-id="4" id="矩形" node-id="55" stroke="none" target-height="5" target-width="33" target-x="380" target-y="467"/><path d="M 386.80 423.00 L 408.20 423.00 L 409.80 423.20 L 411.20 423.80 L 412.40 424.80 L 414.00 427.40 L 414.10 429.80 L 409.80 463.80 L 409.50 465.20 L 407.80 467.50 L 405.40 468.80 L 403.90 469.00 L 389.60 468.80 L 387.20 467.50 L 385.50 465.20 L 380.90 429.80 L 380.90 428.10 L 381.30 426.70 L 383.20 424.20 L 384.50 423.50 L 386.80 423.00 Z" fill="#c0c7d2" fill-rule="evenodd" group-id="4" id="矩形" node-id="56" stroke="none" target-height="46" target-width="33.200012" target-x="380.9" target-y="423"/></g></svg>
                        <p class="mt-2 mb-16 text-gray-400">此分类下还未发布文章哟~</p>
                    </div>
                </div>
                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center" v-if="pages > 1">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <!-- 上一页 -->
                        <li>
                            <a @click="getCategoryArticles(current - 1)"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']">

                                <span class="sr-only">上一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 1 1 5l4 4" />
                                </svg>
                            </a>
                        </li>
                        <!-- 页码 -->
                        <li v-for="(pageNo, index) in pages" :key="index">
                            <a @click="getCategoryArticles(pageNo)"
                                class="flex items-center justify-center px-4 h-10 leading-tight border  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[pageNo == current ? 'text-blue-600  bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700']">
                                {{ index + 1 }}
                            </a>
                        </li>
                        <!-- 下一页 -->
                        <li>
                            <a @click="getCategoryArticles(current + 1)"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current < pages ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">下一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1">
                <div class="sticky top-[5.5rem]">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>

                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>

                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>
        </div>

    </main>

    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import { useRoute, useRouter} from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { getCategoryArticlePageList, getCategoryList } from '@/api/frontend/category'

            
// 文章集合
const articles = ref([])
const route = useRoute()
const router = useRouter()
// 分类名称
const categoryName = ref(route.query.name)
// 分类 ID
const categoryId = ref(route.query.id)
// 监听路由
watch(route, (newRoute, oldRoute) => {
    categoryName.value = newRoute.query.name
    categoryId.value = newRoute.query.id
    getCategoryArticles(current.value)
})
// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(10)
// 总文章数
const total = ref(0)
// 总共多少页
const pages = ref(0)
const getCategoryArticles = async(currentNo) => {
// 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
    if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return
    // 调用分页接口渲染数据
        const res = await getCategoryArticlePageList({
            current: currentNo, 
            size: size.value, 
            id: categoryId.value})
        console.log(res);
        
        if (res.success) {
            articles.value = res.data
            current.value = res.current
            size.value = res.size
            total.value = res.total
            pages.value = res.pages
            console.log(articles);
            
        }
}
// 所有分类
const categories = ref([])
getCategoryList({}).then((res) => {
    if (res.success) {
        categories.value = res.data
    }
})
// 跳转分类文章列表页
const goCategoryArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（分类 ID、分类名称）
    router.push({ path: '/category/article/list', query: { id, name } })
}
const goArticleDetailPage = (articleId) => {
    router.push('/article/' + articleId)
}
onMounted(()=>{
    getCategoryArticles(current.value)
    
})
</script>
